<template>
  <div class="castingManagement">
    <div class="search-bar">
      <el-form
        :inline="true"
        class="search-form"
        ref="test-form"
        label-width="auto"
        size="small"
        style="display: flex; justify-content: space-between"
      >
        <div class="input-row">
          <el-form-item label="商品名称">
            <el-input v-model="pageQuery.prodName" size="mini" placeholder="商品名称" clearable/>
          </el-form-item>
          <el-form-item label="状态:" class="search-form-item">
            <el-select v-model="pageQuery.status" placeholder="状态选择" >
              <el-option label="未映射" value="0"></el-option>
              <el-option label="映射中" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" icon="el-icon-search" @click="getDataList()">查询</el-button>
            <el-button type="primary" size="mini" icon="el-icon-search" @click="clearSearch()">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <!-- 列表相关区域 -->
    <el-table
      v-loading="pageLoading"
      :data="dataList"
      border
      stripe
      fit
      row-key="id"
      highlight-current-row
      style="width: 100%;"
    >
      <!-- 名称 -->
      <el-table-column label="商品名称" prop="prodName" align="center" />
      <!-- DAW denom -->
      <el-table-column label="店铺名称" prop="shopName" align="center" />
      <el-table-column label="映射编码" prop="varietyCode" align="center"  />
      <el-table-column label="映射名称" prop="varietyName" align="center"  />
      <el-table-column label="状态" prop="status" align="center"  :formatter="strstatus"/>
      <el-table-column label="添加时间" prop="createTime" align="center"  />
      <el-table-column label="修改时间" prop="updateTime" align="center"  />
      <!-- 操作 -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button
            type="text"
            v-if="row.id"
            @click="addOrUpdateHandle(row.prodId,row.id)"
          >
            修改
          </el-button>
          <el-button
            type="text"
            v-if="!row.id"
            @click="addOrUpdateHandle(row.prodId,row.id)"
          >
            新增
          </el-button>
          <el-button
            type="text"
            v-if="row.id"
            @click="deleteHandle(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      :total="page.total"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList()" />

  </div>
</template>

<script>
import AddOrUpdate from '@/views/modules/upchain/transfer/add-or-update'

export default {
  components: {
    AddOrUpdate
  },
  data () {
    return {
      pageQuery: {
        prodName: null,
        status:null
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条,
      },
      dataList: [],
      // loading
      pageLoading: true,
      addOrUpdateVisible: false
    }
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    clearSearch() {
      this.pageQuery.prodName = null
      this.pageQuery.status = null

      this.getDataList(this.page)
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getDataList(this.page)
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.getDataList(this.page)
    },
    strstatus (row) {
      let isGoodsName = '未映射'
      if (row.status === 0) {
        isGoodsName = '未发布'
      } else if (row.status === 1) {
        isGoodsName = '已发布'
      }
      return isGoodsName
    },
    getDataList (page) {
      this.pageLoading = true
      this.$http({
        url: this.$http.adornUrl(`/admin/productTansferEnpand/getNftTansferEnpandList`),
        params: this.$http.adornParams(
          Object.assign({
            pageNum: page == null ? this.page.currentPage : page.currentPage,
            pageSize: page == null ? this.page.pageSize : page.pageSize
          },
            this.pageQuery
          )
        ),
        method: 'get'
      }).then(({ data }) => {
        this.dataList = data.list
        this.page.total = data.total
        this.pageLoading = false
      })
    },
    addOrUpdateHandle (prodId, id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(prodId, id)
      })
    },

    deleteHandle (id) {
      this.$confirm(this.$i18n.t('seckill.isDeleOper'),this.$i18n.t('remindPop.remind'), {
        confirmButtonText: this.$t('remindPop.confirm'),
        cancelButtonText: this.$t('remindPop.cancel'),
        type: 'warning'
      }).then(() => this.deleteById(id))
    },
    deleteById (id) {
      this.$http({
        url: this.$http.adornUrl('/admin/productTansferEnpand/delete'),
        method: 'get',
        params:  {id}
      }).then(({ data }) => {
        this.$message({
          message: this.$i18n.t('remindPop.success'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            this.getDataList()
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.categoryManagement {
  width: 95% !important;
  margin: 30px auto 0;
}
.categoryManagement-table-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 30px 0;
}
.categoryManagement-table-header div {
  display: flex;
  flex-direction: row;
}
.categoryManagement-table-header div .input {
  margin-right: 15px !important;
}

.categoryManagement >>> .has-gutter tr th .cell {
  text-align: center;
}
.categoryManagement >>> .el-table__row td .cell {
  text-align: center;
}
</style>
